<template>
  <div>
    <!-- <div :style="{height: navHeight + 'px'}"> -->
    <!-- <ZeNav bgColor="" title="维修计划" :backIcon="true"></ZeNav> -->
    <!-- </div> -->
    <view>
      <view :style="{ height: statusBarHeight + 'px' }" />
      <view
        class="nav-main flex align-center justify-center"
        :style="{ height: navbarHeight + 'px' }"
      >
        <!-- 左侧插槽，默认展示按钮组 -->
        <slot name="left">
          <view class="left">
            <image class="btn-icon" :src="require('@/static/project/back.png')" mode="scaleToFill" @click="back" />
            <view class="line" />
            <image class="btn-icon" :src="require('@/static/project/home.png')" mode="scaleToFill" @click="backHome" />
            <view class="line" />
            <image class="btn-icon" :src="require('@/static/project/searchbtn.png')" mode="scaleToFill" @click="search" />
          </view>
        </slot>
        <!-- <text class="title">
          {{ title }}
        </text> -->
      </view>
    </view>
    <van-tabs
      :active="active"
      title-active-color="#739ECA"
      title-inactive-color="#666"
      line-width="16px"
      color="#739ECA"
      line-height="2px"
      @change="onChange"
    >
      <van-tab title="全部">
        <project-list :list="list" :project="'project'" />
      </van-tab>
      <van-tab title="进行中">
        <project-list :list="list" :project="'project'" />
      </van-tab>
      <van-tab title="已完成">
        <project-list :list="list" :project="'project'" />
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import projectList from '../index/project-list.vue'
// import ZeNav from '@/components/ze-nav/ze-nav.vue'
import { getDeviceInfo } from '@/utils/storage'

export default {
  components: {
    projectList,
  },
  data() {
    return {
      active: 0,
      navHeight: '0',
      statusBarHeight: '0',
      navbarHeight: '0',
      key: false,
      list: [
        {
          name: '五图河APP',
          complete: 1,
          head: '张三',
          start: '2021-03-20',
          end: '2021-12-30',
          schedule: '100',
        },
        {
          name: '市政信息升级管理平台',
          complete: 0,
          head: '李四',
          start: '2022-03-20',
          end: '2022-12-30',
          schedule: '50',
        },
      ],
    }
  },
  onLoad() {
    //
  },
  mounted() {
    // uni.setNavigationBarTitle({
    // 	title: '搜索'
    // })
    this.setHeight()
  },
  methods: {
    onChange(event) {},
    // 设置高度
    setHeight() {
      const { screenHeight, statusBarHeight, navbarHeight } = getDeviceInfo()
      this.navHeight = navbarHeight + statusBarHeight + 10
      this.statusBarHeight = statusBarHeight
      this.navbarHeight = navbarHeight
    },
    // back
    back() {
      uni.navigateBack({
        delta: 1,
      })
    },
    // 返回主页
    backHome() {
      // uni.redirectTo({
      //   url: '/pages/office/index/index',
      // })
      uni.switchTab({
        url: '/pages/office/index/index',
      })
    },
    // 索索页面
    search() {
      uni.navigateTo({
        url: '/pages/project/search/index',
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.nav-main {
  position: relative;

  .left {
    height: 30px;
    padding: 0 26rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 30rpx;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 32rpx;
    // border: 1px solid #e7ebee;

    .btn-icon {
      width: 48rpx;
      height: 48rpx;
    }

    .line {
      width: 2rpx;
      height: 18px;
      margin: 0 14rpx;
      background: #e7ebee;
    }
  }

  .title {
    font-size: 32rpx;
    font-weight: 500;
    color: #000000;
  }
}
</style>
